<template>
  <div>
    <div class="tab-style-default">
      <el-tabs v-model="dataListQuery.contentType" @tab-click="syncStatusClick">
        <el-tab-pane label="图文" name="1"> </el-tab-pane>
        <el-tab-pane label="视频" name="2"> </el-tab-pane>
      </el-tabs>
    </div>
    <div class="top-operate-default">
      <div class="search-item">
        <el-input placeholder="请输入图文名称" style="width:200px;" v-model="dataListQuery.contentName"></el-input>
        <el-button-group class="mar-l-20">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-button-group>
      </div>
    </div>
    <!-- 全选、操作 -->
    <div v-if="!singleFlag">
      <div class="pad-t-15 pad-b-15 font-14 v-align-c">
        <el-checkbox class="mar-l-14 mar-r-0" v-model="checkedAll" @change="checkedAllHandle"><span class="mar-l-20">当页全选</span></el-checkbox>
        <span class="pad-l-4 pad-r-4">|</span>
        <div class="width-80">已选{{multipleSelection.length}}项</div>
      </div>
    </div>
    <div class="content">
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="dataList" @selection-change="handleSelectionChange" v-loading="listLoading"
          :highlight-current-row="singleFlag"
          @current-change="handleCurrentClick($event)"
          element-loading-text="加载中"
          style="width: 100%;"
          header-cell-class-name="default-header"
          row-class-name="default-row"
          >
          <el-table-column width="50px" type="selection" v-if="!singleFlag"></el-table-column>
          <el-table-column label="内容信息">
            <template slot-scope="scope">
              <div class="v-align-c pad-r-20">
                <img class="width-150 height-80" :src="scope.row.coverUrl" alt="">
                <p class="mar-l-10">{{scope.row.contentName}}</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="dataListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]" :page-size="dataListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <div class="text-align-r mar-r-30 pad-t-10 pad-b-20">
      <el-button size="medium" @click="cancel">取消</el-button>
      <el-button size="medium" type="primary" @click="confirm">确认</el-button>
    </div>
  </div>
</template>
<script>
import { pagingContent } from '@/api/content/contentInfo'
export default {
  props: {
    singleFlag: {
      type: Boolean,
      default: function() {
        return true
      }
    }
  },
  data() {
    return {
      dataListQuery: {
        currentPage: 1,
        size: 10,
        enterpriseId: this.getEnterpriseId(),
        contentType: '1',
        contentName: ''
      },
      listLoading: true,
      checkedAll: false,
      multipleSelection: [],
      dataList: [],
      total: 0
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    syncStatusClick() {
      this.init()
    },
    handleSearch() {
      this.init()
    },
    resetSearch() {
      this.dataListQuery = {
        currentPage: 1,
        size: 10,
        contentType: '1',
        contentName: ''
      }
      this.init()
    },
    init() {
      pagingContent(this.dataListQuery).then(response => {
        if (response.isError) return
        this.dataList = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
      this.listLoading = false
    },
    // 更改当前页面大小
    handleSizeChange(val) {
      this.dataListQuery.size = val
      this.init()
    },
    // 更改当前页数
    handleCurrentChange(val) {
      this.dataListQuery.currentPage = val
      this.init()
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length === this.dataList.length) {
        this.checkedAll = true
      } else {
        this.checkedAll = false
      }
    },
    checkedAllHandle() {
      if (this.multipleSelection.length === 0 || this.multipleSelection.length < this.dataList.length) {
        this.dataList.forEach(item => {
          this.$refs.multipleTable.toggleRowSelection(item, true)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleCurrentClick(item, row) {
      if (!this.singleFlag) return
      item.linkRemark = item.contentName
      this.$emit('selectSingleContent', item)
      // this.$refs.multipleTable.setCurrentRow(row)
      // this.cancel()
    },
    confirm() {
      this.$emit('selectContent', this.multipleSelection)
      this.dataList.forEach(item => {
        this.$refs.multipleTable.toggleRowSelection(item, false)
      })
      this.cancel()
    },
    cancel() {
      this.$parent.$parent.$parent.linkSetVisible = false
    }
  }
}
</script>
<style lang="less" scoped>
.content{
  height: 350px;
  overflow: auto;
}
</style>
